<template>
  <div>
    <h1>修改密码</h1>
    <span>email：</span>
    <input type="text" v-model="userInfo.email" />
    <span>验证码：</span>
    <input type="text" v-model="userInfo.code" />
    <button type="button" @click="sendCode()" :disabled="isDis">发送验证码{{num}}</button>
    <button type="button" @click="getPwdPage()">进入修改密码页面</button>
  </div>
</template>

<script>
  export default {
    name: "testUpdatePwd",
    data() {
      return {
        userInfo: {
          email: "2681160673@qq.com",
          code: ""
        },
        isDis: false,
        num: "" //倒计时

      }
    },
    methods: {
      sendCode() { //发送验证码
        //发送get请求
        var self = this;
        this.$http.get("/userInfo/updatePwd", {
          params: this.userInfo
        }).then(function(rs) {
          console.log(rs.data);
          alert(rs.data.info);
          if (rs.data.success) {
            //禁用发送按钮
            self.isDis = true;

            //按钮开始计时
            self.num = 60;
            var time = setInterval(function() {
              self.num--;
              //判断倒计时是否结束
              if (self.num == 0) {
                //启动按钮
                self.isDis = false;
                self.num = "";
                //清除计时器
                clearInterval(time);
              }

            }, 1000)
          }
        }).catch(function(rs) {
          console.log("服务器连接错误");
        })

      },
      getPwdPage() { //进入修改界面
        var self = this;
        this.$http.post("/userInfo/validateCode",
          this.$qs.stringify(this.userInfo)).then(function(rs) {
          alert(rs.data.info);
          if (rs.data.success) {
            //
            self.$router.push({
              "name": "testUpdatePwd2",
              query: {
                "email": self.userInfo.email
              }
            });
          }
        }).catch(function(rs) {
          console.log("服务器连接错误");
        })

      }
    },
  }
</script>

<style>
</style>
